<template>
  <div id="bg">
    <navTop></navTop>
    <div class="user">
      <div class="clear">
        <router-link to="/my/logOut">
          <van-icon name="setting-o" />
        </router-link>
      </div>
      <div class="uName">
        <h2>
          <img src="../../assets/image/myCenter/head.jpg" alt />
        </h2>
        <p>{{name}}</p>
        <a href="#">普通会员</a>
      </div>
      <ul class="userNum">
        <li>
          积分:
          <span>0</span>
        </li>
        <li>
          余额:
          <span>{{Math.floor(Math.random()*1000+300)}}</span>
        </li>
        <li>
          成长值:
          <span>0</span>
        </li>
      </ul>
    </div>
    <router-link to="/my/dingdan/0">
    <p class="all_dingdan">
      <a href="#">全部订单</a>
      <van-icon name="arrow" />
    </p>
    </router-link>
    <div class="dingdan">
      <van-grid :border="false" icon-size="20px">
        <van-grid-item v-for="(item,index) in dingdanList" :key="index" @click="godingdan(index)">
          <i :class="item.className"></i>
          {{item.text}}
        </van-grid-item>
      </van-grid>
    </div>
    <div class="section">
      <van-grid icon-size="20px">
        <van-grid-item @click.native="development()" v-for="(item,index) in modelList" :key="index">
          <i :class="item.className"></i>
          {{item.text}}
        </van-grid-item>
        <van-grid-item />
      </van-grid>
    </div>
  </div>
</template>

<script>
import navTop from "@/components/common/navTop";
export default {
  data() {
    return {
      name: this.$store.state.user.username,
      check: false,
      dingdanList: [
        { text: "总订单", className: "iconfont icon-jiantou" },
        { text: "配送中", className: "iconfont icon-dianhua" },
        { text: "已完成", className: "iconfont icon-wancheng" },
        { text: "无效", className: "iconfont icon-wuxiao" }
      ],
      modelList: [
        { text: "充值返现", className: "iconfont icon-qia" },
        { text: "我的私人定制", className: "iconfont icon-yifu" },
        { text: "物流查询", className: "iconfont icon-kuaidi" },
        { text: "退换货记录", className: "iconfont icon-tuihuojilu" },
        { text: "地址管理", className: "iconfont icon-fangwuguanli" },
        { text: "我的礼品卡", className: "iconfont icon-lipinqia" },
        { text: "我的优惠券", className: "iconfont icon-youhuiquan1" },
        { text: "我的积分", className: "iconfont icon-jifen" },
        { text: "我的评论", className: "iconfont icon-pinglun" },
        { text: "我的提问", className: "iconfont icon-wodetiwen" },
        { text: "投诉建议", className: "iconfont icon-tousujianyi1" }
      ]
    };
  },

  components: {
    navTop
  },
  methods: {
    godingdan(index){
      this.$router.push("/my/dingdan/"+index)
    },
    development(){
      this.$toast.fail("功能开发中...")
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  font-size: 12px;
}
a {
  color: #000;
}
#bg {
  background: #f0eff5;
}
.user {
  width: 100%;
  height: 200px;
  background: url("../../assets/image/myCenter/userBg.png") no-repeat;
  color: #fff;
  margin-bottom: 10px;
  a {
    color: #fff;
  }
  .van-icon {
    font-size: 20px;
    margin: 10px 10px 0 0;
  }
  .clear {
    text-align: right;
    width: 100%;
    height: 30px;
  }
  .uName {
    text-align: center;
    height: 126px;
    h2 {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      margin: 0 auto;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      margin: 8px 0 8px;
    }
  }
  .userNum {
    display: flex;
    justify-content: space-around;
    li {
      width: 32%;
    }
  }
}
.all_dingdan {
  width: 100%;
  height: 38px;
  background: #fff;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 0 10px;
  .van-icon {
    font-size: 18px;
    color: #c7c7c7;
  }
}
::v-deep .dingdan {
  width: 100%;
  height: 66px;
  margin-bottom: 12px;
  .van-grid {
    height: 100%;
    font-size: 12px;
    .van-grid-item__content {
      padding: 0;
    }
    .iconfont {
      font-size: 24px;
      display: inline-block;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      z-index: 999;
    }
  }
}
$iconDate:(#ffd100,#5dddcd,#7dd6a8,#cea1be,#91b2d6,#ff965d,#ff5588,#ff6f92,#fd5a5a,#aa7fda,#8fb5b7);
::v-deep .section {
  .van-grid {
    .van-grid-item{
      @for $i from 1 through length($iconDate){
        $item:nth($iconDate,$i);
        &:nth-of-type(#{$i}) .iconfont{
          color:$item
        }
      }
      &:nth-of-type(2) .iconfont{
        font-size: 24px;
        margin-bottom: 8px;
      }
    }
    .van-grid-item__content {
      padding: 0;
      height: 84px;
      font-size: 12px;
    }
    .iconfont {
      font-size: 30px;
      display: inline-block;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      z-index: 2;
    }
  }
}
</style>